<template>
  <div class="mh_index">
    <div class="banner_img">
      <img class="banner" src="../../../assets/img/modules/mh/mh_1.png" alt="">
      <div class="title_h1">民航职工圆梦大学</div>
      <div class="tab_list">
        <a href="/mh-detail?id=13139" class="item_a">
          <div class="img_logo">
            <img src="../../../assets/img/modules/mh/mh_3.png" alt="">
            <div class="name">大学简介</div>
          </div>
          <p>随时学 安心学 快乐学</p>
        </a>
        <a href="http://zt.zhulijihua.com/2018/guokai/column_mhxygk.html" class="item_a">
          <div class="img_logo">
            <img src="../../../assets/img/modules/mh/mh_2.png" alt="">
            <div class="name">办学特色</div>
          </div>
          <p>前所未有的求学体验</p>
        </a>
      </div>
    </div>
    <div class="advisory_list">
      <van-list
          v-model="loading"
          :finished="finished"
          @load="onLoad">
        <a :href="'/mh-detail?id='+ item.id" v-for="(item, index) in articleList" :key="item.id+ '' + index" class="advisory_item">
          <div class="text_body">
            <div class="title_name">{{item.title}}</div>
            <span>{{item.updatetime | time}}</span>
          </div>
          <img :src="item.thumb ? item.thumb : 'http://m.oucgz.cn/icon_no_img_z.png'" alt="">
        </a>
      </van-list>
      <!--加载状态-->
      <div v-for="item in 4" :key="item">
        <van-skeleton
            title
            style="margin-top: 30px"
            :row="2"
            :loading="loading">
        </van-skeleton>
      </div>
      <div v-if="footerShow" class="no_data_title">
        <p>没有内容了~</p>
      </div>
    </div>
  </div>
</template>
<script>
import debounce from 'lodash/debounce'
export default {
  name: 'mh_index',
  components: {},
  data () {
    return {
      loading: false, // 上拉加载
      finished: false, // 上拉加载
      footerShow: false, // 上拉加载
      articleList: [], // 列表
      current: 1, // 当前页
      size: 5 // 每页条数
    }
  },
  filters: {
    time: function time (value) {
      let d = new Date(parseInt(value) * 1000)
      return (d.getFullYear()) + '-' + (d.getMonth() + 1 > 9 ? d.getMonth() + 1 : '0' + (d.getMonth() + 1)) + '-' + (d.getDate() > 9 ? d.getDate() : '0' + d.getDate())
    }
  },
  props: {},
  watch: {},
  methods: {
    /* wf_Huang 2019/9/4 0004 上拉加载 */
    onLoad: debounce(function () {
      this.getData()
    }, 100, { 'leading': true, 'trailing': false }),
    /* wf_Huang 2019/9/4 0004 获取列表数据 */
    getData () {
      this.$http({
        url: `${window.SITE_CONFIG['mhURL']}/index.php?s=api&c=news&m=get_news_list`,
        method: 'post',
        data: {
          flag: 2,
          page: this.current,
          limit: this.size
        },
        withCredentials: false
      }).then(({ data: res }) => {
        if (res.status !== 1) {
          this.$toast('列表查询失败~')
          return false
        }
        if (res.data.list) {
          if (res.data.list.length < this.size) {
            this.footerShow = true
            this.finished = true
          } else {
            this.footerShow = false
          }
          res.data.list.forEach(item => {
            this.articleList.push(item)
          })
        } else {
          this.footerShow = true
          this.finished = true
        }
        this.loading = false
        this.current = this.current + 1
      }).catch(() => {})
    }
  },
  computed: {},
  created () {
  },
  mounted () {
  },
  destroyed () {
  }
}
</script>
<style lang="scss" scoped>
  .mh_index {
    width: 750px;
    margin: 0 auto;
    .banner_img{
      background: url("../../../assets/img/modules/mh/mh_4.png") no-repeat center top;
      background-size: 750px 360px;
      padding-top: 1px;
      .banner{
        width: 686px;
        height: 360px;
        margin: 130px auto 0;
        display: block;
        box-shadow: 0 0 20px rgba(0,0,0,0.2);
      }
      .title_h1{
        font-size: 40px;
        color: #222222;
        margin: 60px 0;
        text-align: center;
        font-weight: bold;
      }
      .tab_list{
        display: flex;
        padding: 31px;
        justify-content: space-between;
        .item_a{
          background: #FFFFFF;
          box-shadow: 0 10px 20px 0 rgba(51,51,51,0.10);
          border-radius: 4px;
          width: 333px;
          height: 162px;
          display: flex;
          align-items: center;
          flex-direction: column;
          justify-content: center;
          .img_logo{
            display: flex;
            justify-content: center;
            align-items: center;
            img{
              width: 48px;
              height: 44px;
              margin: 0;
            }
            .name{
              font-size: 32px;
              color: #222222;
              font-weight: bold;
              margin-left: 15px;
              font-family: PingFangSC-Regular;
            }
          }
          p{
            font-size: 24px;
            color: #999999;
            text-align: center;
          }
        }
      }
    }
    .advisory_list{
      padding: 31px;
      .advisory_item{
        border-bottom: 1px solid #efefef;
        position: relative;
        padding: 30px 170px 30px 0;
        height: 198px;
        display: block;
        &:last-child{
          border: 0;
        }
        img{
          position: absolute;
          top: 30px;
          right: 0;
          width: 138px;
          height: 138px;
          border-radius: 4px;
        }
        .text_body{
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          height: 100%;
          .title_name{
            font-size: 32px;
            color: #222222;
            line-height: 40px;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
          }
          span{
            font-size: 24px;
            color: #999999;
          }
        }
      }
    }
  }
</style>
